<template>
	<view class="back-view">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">商品详情</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../static/close.png"></image>
				</view>
			</view>

			<view class="top-line"></view>
				<scroll-view class="center-back" scroll-y="true" style="width: 100%;">
				
				<view style="display: flex;">
					<image class="goodsimg" mode="aspectFill" :src="detailItem.picUrls"></image>
					<view class="goodsdesback">
						<view class="goodsname">{{detailItem.name}}</view>
						<view class="goodsmoney"><text class="bottom-money-unit">¥</text>{{detailItem.price}}</view>
						<view class="goodsOther">
							<image class="goodsotherimg" :src="phone_qyfw"></image>
							<view class="goodsotheritem">
								<view>· 有效期{{detailItem.expireDay}}天</view>
								<view>· 每{{detailItem.cycleUnit.desc}}可咨询{{detailItem.cycleTimes}}次</view>
							</view>
							<view class="goodsotheritem goodsotheritem2">
								<view>· 可发起总咨询数{{detailItem.consultCount}}次</view>
								<view>· 可咨询领域:{{detailItem.domainDict}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="top-line"></view>
				<view class="webview-name">服务介绍</view>
				<view class="webview">
					<rich-text :nodes="detailItem.intro"></rich-text>
<!-- 					<web-view v-if="detailItem.intro" :src="detailItem.intro"></web-view>
 -->				</view>
			</scroll-view>
			<view class="bottom-back">
				<view class="bottom-btn" @click="closeBtnAction">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemID: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				detailItem: {},
				phone_qyfw:getApp().globalData.baseImageUrl+'/phone_qyfw.png'
			}
		},
		mounted() {
			this.requestInfo1Data();
		},
		methods: {
			//信息网络请求
			async requestInfo1Data() {
				let _this = this
				const res = await this.$myRequest({
					url: '/admin/goods/' + this.itemID,
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.detailItem = res.data.data;
					if (res.data.data.picUrls) {
						var picUrls = _this.$imageUrls({
							picUrls: res.data.data.picUrls,
							height: 400
						})
						_this.$set(_this.detailItem, 'picUrls', picUrls);
					}
					_this.$set(_this.detailItem, 'price', (res.data.data.price / 100).toFixed(2))

					if (res.data.data.domainDict == '-1') {
						_this.$set(_this.detailItem, 'domainDict', '不限')
					}
					if (res.data.data.consultCount == -1) {
						_this.$set(_this.detailItem, 'consultCount', '不限')
					}

				}
			},
			closeBtnAction() {
				console.log('222')
				this.$emit('detailClose')
			},
			moveHandle() {
				return true
			},
		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 552px;
		height: 540px;
		padding: 24px;
		max-height: 540px;
		background-color: white;
		margin-top: -70px;
		border-radius: 4px;
		z-index: 1001;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;

	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	/*
	中间高度=总高 600- 20-21 - 20-60 + 14
	 */
		.center-back {
			width: 100%;
			max-height: 440px;
			height: 440px;
		}

	.item-back {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}




	.bottom-back {

		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		height: 60px;
		right: 16px;
	}

	.bottom-btn {
		cursor: pointer;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-money-unit {
		font-size: 14px;
		font-weight: 400;
		color: #F35C22;
	}

	.bottom-money {
		font-size: 22px;
		font-weight: 600;
		color: #F35C22;
		margin-right: 16px;
	}

	.goodsimg {
		width: 180px;
		height: 180px;
		min-width: 180px;
		border-radius: 4px;
		border: 1px solid #EEEEEE;

	}

	.goodsdesback {
		margin-left: 16px;
		margin-right: 16px;
		height: 180px;
		display: flex;
		flex-direction: column;
	}

	.goodsname {
		font-size: 18px;
		font-weight: 500;
		color: #333333;
	}

	.goodsmoney {
		font-size: 22px;
		font-weight: 600;
		color: #F35C22;
		margin-top: 10px;
	}

	.goodsOther {
		width: 354px;
		background: #E8F7FB;
		border-radius: 4px;
		margin-bottom: 0px;
		margin-top: auto;
		align-items: center;
		display: flex;
	}

	.goodsotherimg {
		width: 56px;
		height: 56px;
	}

	.goodsotheritem {
		margin-left: 10px;
		width: 109px;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.goodsotheritem2 {
		width: 160px;
	}

	.webview {
		margin-top: 15px;
		margin-bottom: 15px;
		width: 100%;
	}

	.webview-name {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-top: 20px;
	}
</style>
